<template>
  <div>
    <a-row>
      <a-col :span="12">
        <a-alert
          style="width: 610px;margin-bottom: 24px;"
          show-icon
          type="warning"
          message="员工单条工资识别计算规则为：工种 X 考勤状态"
          closable
        />
      </a-col>
    </a-row>
    <div class="box">
      <a-tabs type="card" default-active-key="typeWork" @change="v => (componentName = v)">
        <a-tab-pane :key="item.type" v-for="item in numArr">
          <span slot="tab">
            <a-badge :count="item.num" :offset="[5, -2]">{{ item.name }}</a-badge>
          </span>
        </a-tab-pane>
      </a-tabs>
      <div :is="componentName"></div>
    </div>
  </div>
</template>

<script>
import typeWork from "./typeWork";
import check from "./check";
export default {
  components: {
    typeWork,
    check
  },
  data() {
    return {
      componentName: "typeWork",
      numArr: [
        { type: "typeWork", name: "工种管理", num: 0 },
        { type: "check", name: "考勤管理", num: 0 }
      ],
      address: "",
      isSign: false
    };
  }
};
</script>

<style lang="scss" scoped>
.box {
  ::v-deep.ant-tabs-tab {
    line-height: 60px;
    padding-top: 0px;
    height: 60px;
    margin-right: 12px !important;
  }
  ::v-deep.ant-tabs-bar {
    margin-bottom: 24px !important;
  }
}
</style>
